<template>
  <div class="home-container">
    <h2>欢迎来到首页</h2>
    <p>{{ welcomeMessage }}</p>
    <div class="link-container">
      <router-link to="/login" class="link">前往登录</router-link>
      <router-link to="/register" class="link">前往注册</router-link>
      <router-link to="/delete" class="link">前往删除</router-link>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'Home',
  data() {
    return {
      welcomeMessage: '欢迎来到首页！',
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      axios
          .get('/api/welcome-message')
          .then(response => {
            this.welcomeMessage = response.data.message;
          })
          .catch(error => {
            console.error('获取欢迎信息失败:', error);
          });
    },
  },
};
</script>

<style scoped>
/* 全局背景渐变 */
body {
  margin: 0;
  padding: 0;
  font-family: 'Arial', sans-serif;
  color: white;
  height: 100vh;
  overflow: hidden;
  background: linear-gradient(135deg, #42b983, #34495e);
  background-size: 400% 400%;
  animation: gradientAnimation 15s ease infinite;
}

/* 容器居中对齐并添加阴影 */
.home-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

/* 标题样式，添加渐变色 */
h2 {
  font-size: 2.5rem;
  color: #ffffff;
  margin-bottom: 20px;
  background: linear-gradient(90deg, #42b983, #34495e);
  -webkit-background-clip: text;
  color: transparent;
}

/* 文字样式，增加间距和可读性 */
p {
  font-size: 1.2rem;
  line-height: 1.6;
  margin-bottom: 30px;
  font-weight: 400;
}

/* 链接容器的样式 */
.link-container {
  display: flex;
  justify-content: center;
  gap: 30px;
}

/* 链接样式，带有按钮效果 */
.link {
  font-size: 1.1rem;
  color: #42b983;
  text-decoration: none;
  padding: 10px 20px;
  border: 2px solid #42b983;
  border-radius: 5px;
  transition: all 0.3s ease;
}

/* 悬停效果 */
.link:hover {
  background-color: #42b983;
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* 动态渐变背景动画 */
@keyframes gradientAnimation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* 可选的响应式设计，优化移动端显示 */
@media (max-width: 768px) {
  .home-container {
    padding: 10px;
  }
  h2 {
    font-size: 2rem;
  }
  .link-container {
    flex-direction: column;
    gap: 15px;
  }
  .link {
    width: 100%;
    text-align: center;
  }
}
</style>



